<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 100px;
                height: 100px;
                border: 1px solid red;
/*                margin-left: 100px;
                margin-top: 100px;*/
                /*margin-bottom: 50px;*/
                margin: 50px;/*填一个参数上下左右各移动50*/
                /*填两个参数为上下移动xxpx 左右移动xxpx*/
                /*四个参数为 上右下左 顺时针赋值*/
            }
            #d2{
               /*上下相邻彼此添加外边框  取最大值*/
                width: 100px;
                height: 100px;
                border: 1px solid red;
                margin-top: 100px;
            }
            #s1{
               /* margin-left: 100px;*/
                margin-right: 50px ;
                /*行内元素上下外边距无效*/
/*                margin-top: 100px;
                margin-bottom: 100px;*/
            }
            #s2{
                /*左右相邻彼此添加外边框  两者相加*/
                margin-left: 50px;
            }
            #big{
                width: 200px; height: 200px;  background: red;
                overflow: hidden;/*解决粘连问题*/
            }
            #big>div{
                width: 50px; height: 50px;  background: green;
                margin-left: 75px;
                /*当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题*/
                margin-top: 75px;
            }
            #border_div{
                width: 200px;
                height: 200px;
                border: 5px solid blue;
                /*设置圆角*/
                border-radius: 200px;

            }
        </style>
    </head>
    <body>

    <div id="border_div"></div>

    <div id="big">
        <div></div>
    </div>

    <span id="s1">span1<span id="s2">span2</span></span>

    <div id="d1">外边距测试1</div>
    <div id="d2">外边距测试2</div>

    </body>
</html>